<template>
  <div class="container">
    <div class="database-header">
      <h2>熊猫资料库</h2>
      <p>了解各种熊猫的知识，查看全球熊猫基地的信息，成为熊猫专家。所有资料均来自权威机构，定期更新。</p>
    </div>

    <div class="search-bar">
      <input 
        type="text" 
        v-model="searchQuery"
        @keyup.enter="handleSearch"
        placeholder="搜索熊猫或基地名称..."
      >
      <button @click="handleSearch">🔍</button>
    </div>

    <div class="database-tabs">
      <div 
        v-for="tab in tabs" 
        :key="tab.value"
        class="database-tab"
        :class="{ active: currentTab === tab.value }"
        @click="handleTabChange(tab.value)"
      >
        {{ tab.label }}
      </div>
    </div>

    <h3 style="margin: 30px 0 20px; font-size: 22px;">明星熊猫</h3>

    <div class="panda-grid">
      <div v-for="panda in pandas" :key="panda.id" class="panda-card">
        <img :src="panda.image" :alt="panda.name" class="panda-image">
        <div class="panda-info">
          <h3>{{ panda.name }}</h3>
          <div class="panda-meta">
            <span>{{ panda.gender }}</span>
            <span>🎂 {{ panda.age }}岁</span>
            <span>📍{{ panda.location }}</span>
          </div>
          <p class="panda-description">{{ panda.description }}</p>
          <a href="#" class="view-details" @click.prevent="viewPandaDetails(panda)">查看详情</a>
        </div>
      </div>
    </div>
    
    <h3 style="margin: 50px 0 20px; font-size: 22px;">熊猫基地分布</h3>
    
    <div class="base-map">
      <div v-for="base in pandaBases" :key="base.id" class="map-marker" :style="{ left: base.x + '%', top: base.y + '%' }">
        <div class="map-info">
          <h4>{{ base.name }}</h4>
          <p>{{ base.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
:root {
  --primary-color: #333333;
  --secondary-color: #4CAF50;
  --accent-color: #FF9800;
  --light-color: #f8f8f8;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

body {
  background-color: var(--light-color);
  color: var(--primary-color);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.database-header {
  margin: 40px 0 30px;
  text-align: center;
}

.database-header h2 {
  font-size: 28px;
  color: var(--primary-color);
  margin-bottom: 15px;
}

.database-header p {
  color: #666;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

.search-bar {
  max-width: 600px;
  margin: 30px auto;
  position: relative;
}

.search-bar input {
  width: 100%;
  padding: 12px 20px;
  border: 2px solid #ddd;
  border-radius: 30px;
  font-size: 16px;
  transition: all 0.3s;
}

.search-bar input:focus {
  border-color: var(--secondary-color);
  outline: none;
}

.search-bar button {
  position: absolute;
  right: 5px;
  top: 5px;
  background-color: var(--secondary-color);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: all 0.3s;
}

.search-bar button:hover {
  background-color: #3e8e41;
}

.database-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}

.database-tab {
  padding: 10px 25px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s;
}

.database-tab:hover, .database-tab.active {
  background-color: var(--secondary-color);
  color: white;
  border-color: var(--secondary-color);
}

.panda-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  margin: 40px 0;
}

.panda-card {
  background-color: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.panda-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.panda-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.panda-info {
  padding: 20px;
}

.panda-info h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--primary-color);
}

.panda-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  color: #666;
  font-size: 14px;
}

.panda-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.panda-description {
  color: #555;
  line-height: 1.5;
  font-size: 14px;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.view-details {
  display: inline-block;
  padding: 8px 15px;
  background-color: rgba(76, 175, 80, 0.1);
  color: var(--secondary-color);
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s;
}

.view-details:hover {
  background-color: var(--secondary-color);
  color: white;
}

.base-map {
  height: 400px;
  background-color: #eee;
  border-radius: 15px;
  margin: 40px 0;
  position: relative;
  overflow: hidden;
}

.map-marker {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: var(--secondary-color);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  left: 30%;
  top: 40%;
}

.map-marker::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: white;
  border-radius: 50%;
  left: 3px;
  top: 3px;
}

.map-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 15px;
  transform: translateY(100%);
  transition: transform 0.3s;
}

.base-map:hover .map-info {
  transform: translateY(0);
}
</style>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import apiService from '@/services/api.service'

const router = useRouter()
const searchQuery = ref('')
const currentTab = ref('pandas')
const pandas = ref([])
const pandaBases = ref([])
const loading = ref(false)

const tabs = [
  { label: '熊猫档案', value: 'pandas' },
  { label: '熊猫基地', value: 'bases' },
  { label: '熊猫百科', value: 'wiki' },
  { label: '保护现状', value: 'protection' }
]

const fetchPandas = async () => {
  loading.value = true
  try {
    const response = await apiService.getPandas()
    if (response.success) {
      pandas.value = response.data
    } else {
      ElMessage.error(response.message || '获取熊猫数据失败')
    }
  } catch (error) {
    ElMessage.error('获取熊猫数据失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

const fetchPandaBases = async () => {
  loading.value = true
  try {
    const response = await apiService.getPandaBases()
    if (response.success) {
      pandaBases.value = response.data
    } else {
      ElMessage.error(response.message || '获取基地数据失败')
    }
  } catch (error) {
    ElMessage.error('获取基地数据失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  if (!searchQuery.value.trim()) {
    ElMessage.warning('请输入搜索关键词')
    return
  }
  // TODO: 实现搜索功能
  ElMessage.info('搜索功能开发中...')
}

const handleTabChange = (tab) => {
  currentTab.value = tab
  if (tab === 'pandas') {
    fetchPandas()
  } else if (tab === 'bases') {
    fetchPandaBases()
  } else {
    // TODO: 实现其他标签页的数据获取
    ElMessage.info('该功能正在开发中...')
  }
}

const viewPandaDetails = (panda) => {
  // TODO: 实现查看详情功能
  ElMessage.info('详情页面开发中...')
}

onMounted(() => {
  fetchPandas()
})
</script> 